import React, { useEffect, useState } from 'react'

// 路由跳转图片
import icon1 from '../../assets/image/Icon_智能检测 Normal.png'
import icon11 from '../../assets/image/Icon_智能检测.png'
import icon2 from '../../assets/image/Icon_就业态势 Normal.png'
import icon22 from '../../assets/image/Icon_就业态势.png'
import icon3 from '../../assets/image/Icon_安防管理 Normal.png'
import icon33 from '../../assets/image/Icon_安防管理.png'
import icon4 from '../../assets/image/Icon_设备运维 Normal.png'
import icon44 from '../../assets/image/Icon_设备运维.png'
import './navbar.scss'
import { useNavigate, useLocation } from 'react-router-dom'

function navbar() {
  const localhost = useLocation()
  console.log(localhost, '8888');

  let newPath = localhost.pathname

  console.log(newPath, '路径');
  const [arr, setArr] = useState([
    {
      id: 1,
      blurImg: icon1,
      activeImg: icon11,
      isBlue: false,
      path: '/home'
    },
    {
      id: 2,
      blurImg: icon2,
      activeImg: icon22,
      isBlue: false,
      path: '/cart'
    },
    {
      id: 3,
      blurImg: icon3,
      activeImg: icon33,
      isBlue: false,
      path: '/class'
    },
    {
      id: 4,
      blurImg: icon4,
      activeImg: icon44,
      isBlue: false,
      path: '/my'
    }
  ])

  const navigate = useNavigate()
  const handClick = (path: string) => {
    console.log(path, '路径11');
    navigate(path)
  }
  let CPath = arr.find((item: any) => item.path === newPath)
  console.log(CPath);

  if (CPath) {
    CPath.isBlue = true
    // CPath.isBlue = !CPath.isBlue
  }

  return (
    <div className='cen_btn'>
      {
        arr && arr.map((item: any, index: number) => {
          return <div onClick={() => handClick(item.path)} key={item.id}
            className='itemBox'>
            <img className='imgs' src={item.isBlue ? item.activeImg : item.blurImg} alt="" />
          </div>
        })
      }
    </div>
  )
}

export default navbar